<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-checkcard ant-pro-checkcard-bordered"
    >
      <div
        class="ant-pro-checkcard-content ant-pro-checkcard-avatar-header"
      >
        <div
          class="ant-pro-checkcard-avatar"
        >
          <span
            class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
            style="background-color: #7265e6;"
          >
            <span
              aria-label="user"
              class="anticon anticon-user"
              role="img"
            >
              <svg
                aria-hidden="true"
                data-icon="user"
                fill="currentColor"
                focusable="false"
                height="1em"
                viewBox="64 64 896 896"
                width="1em"
              >
                <path
                  d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
                />
              </svg>
            </span>
          </span>
        </div>
        <div
          class="ant-pro-checkcard-detail"
        >
          <div
            class="ant-pro-checkcard-header"
          >
            <div
              class="ant-pro-checkcard-header-left"
            >
              <div
                class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
              >
                示例标题
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard Avatar Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            avatar
          </strong>
          : 卡片头像，可以是图片 URL 字符串或 React 节点
        </li>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
      </ul>
      <h4>
        Avatar 组件 Props：
      </h4>
      <ul>
        <li>
          <strong>
            style
          </strong>
          : 头像样式对象，可以设置背景色等
        </li>
        <li>
          <strong>
            icon
          </strong>
          : 头像图标，可以是 Ant Design 图标组件
        </li>
        <li>
          <strong>
            size
          </strong>
          : 头像尺寸，可选值：'large' | 'default' | 'small'
        </li>
        <li>
          <strong>
            src
          </strong>
          : 头像图片地址（字符串形式）
        </li>
      </ul>
      <h4>
        Avatar 使用方式：
      </h4>
      <ul>
        <li>
          <strong>
            字符串
          </strong>
          : 直接传入图片 URL，如 avatar="https://example.com/image.jpg"
        </li>
        <li>
          <strong>
            组件
          </strong>
          : 传入 Avatar 组件，可以自定义样式和图标
        </li>
        <li>
          <strong>
            图标
          </strong>
          : 使用 Ant Design 图标作为头像内容
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>